<template>
    <div style="padding: 15px;box-sizing: border-box;">
        <el-button plain>全部订单(1000)</el-button>
        <el-button plain>待付款(1000)</el-button>
        <el-button plain>待发货(1000)</el-button>
        <el-button plain>已发货(1000)</el-button>
        <el-button plain>已完成(1000)</el-button>
        <el-button plain>已关闭(1000)</el-button>
        <div style="display: flex; margin: 15px 0;">
            <!-- 日期选择器 -->

            <div class="block" style="margin-right: 20px;">
                <el-date-picker v-model="value2" type="daterange" unlink-panels range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" :shortcuts="shortcuts" :size="size" @change="blur" />
            </div>
            <!-- 搜索框 -->
            <div class="mt-4">
                <el-input v-model="input3" placeholder="请输入搜索内容" class="input-with-select" @blur="Sinput">
                    <template #prepend>
                        <el-select v-model="select" placeholder="搜索类型" style="width: 115px">
                            <el-option label="订单编号" value="订单编号" />
                            <el-option label="收货人姓名" value="收货人姓名" />
                            <el-option label="收货人电话" value="收货人电话" />
                            <el-option label="商品货号" value="商品货号" />
                        </el-select>
                    </template>
                    <template #append>
                        <el-button @click="searchfn">查询</el-button>
                    </template>
                </el-input>
            </div>
        </div>
        <!-- 表格部分 -->
        

        <el-table :data="listDate" style="width: 100%" border :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }">
            <el-table-column prop="orderId" label="订单编号" width="100" />
            <el-table-column prop="createTime" label="提交时间" />
            <el-table-column prop="payable" label="订单金额" />
            <el-table-column prop="name" label="用户姓名" width="180"/>
            <el-table-column prop="phone" label="用户电话" width="180"/>
            <el-table-column prop="payMethod" label="支付方式" width="120" />
            <el-table-column prop="state" label="订单状态" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button link type="primary" size="small">查看订单</el-button>
                    <el-button link type="primary" size="small" v-if="(scope.row.state)=='1'">删除订单</el-button>
                    <el-button link type="primary" size="small" v-if="scope.row.state==='未发货'">订单发货</el-button>
                    <el-button link type="primary" size="small" v-if="(scope.row.state)=='未2'">订单跟踪</el-button>
                    <el-button link type="primary" size="small" v-if="(scope.row.state)=='未3'">关闭订单</el-button>
                </template>


            </el-table-column>
        </el-table>
        <!-- 分页部分 -->
        <div class="fenye">
            <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
                :page-sizes="[100, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </div>
</template>
<script setup lang="ts">
import axios from '../WuJiUtils/http';
import { reactive, ref } from 'vue'

const select = ref('')
const size = ref<'default' | 'large' | 'small'>('default')
// interface _listDate {
//     number: string, time: string, msg: { name: string, phone: number }, money: number, pay: string, type: string
// }
let listDate:any = ref([])
let name=ref('')
let commodId=ref(0)
let phone=ref(0)
let orderId=ref('')
let startTime=ref('')
let deadTime=ref('')
let total=ref(1)
const value2 = ref('')
const searchfn=()=>{
    if(select.value==='订单编号'){
        orderId.value=input3.value
    }else if(select.value==='收货人姓名'){
        name.value=input3.value
    }else if(select.value==='收货人电话'){
        phone.value=Number(input3.value)
    }else{
        commodId.value=Number(input3.value)
    }
    render()
}
const blur = (value: any) => {
    value.forEach((i,index,value) => {
        let date=new Date(i)
    let y =date.getFullYear()
    let m=date.getMonth()+1
    if(m<10){
        m='0'+m
    }
    let d=date.getDate()
    if(d<10){
        d='0'+d
    }
    i=y+'-'+m+'-'+d
    value[index]=i
    });
    
    // console.log(value);
    startTime.value=Object.values(value)[0]+''
    deadTime.value=Object.values(value)[1]+''
    console.log(startTime.value,deadTime.value);
    // console.log(value2.value);
    render()

}

const shortcuts = [
    {
        text: 'Last week',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
        },
    },
    {
        text: 'Last month',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
        },
    },
    {
        text: 'Last 3 months',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            return [start, end]
        },
    },
]


const input3 = ref('')

let currentPage4 = ref(1)
let pageSize4 = ref(5)
const handleSizeChange = (v) => {
    pageSize4.value=v
    render()
}
const handleCurrentChange = (v) => {
    currentPage4.value=v
    render()
}

function render() {
    axios({
        url: '/orderComm/list',
        method: "post",
        data: { page: currentPage4.value, limit: pageSize4.value,name:name.value,commodId:commodId.value,phone:phone.value,orderId:orderId.value,startTime:startTime.value,deadTime:deadTime.value }
    }).then((res) => {
        console.log(res);
        if (res.data.code == 0) {
            // console.log(res.data.data);
            // let $listDate=JSON.parse(JSON.stringify(listDate))
            // $listDate=res.data.data
            total.value=res.data.count
            listDate.value=res.data.data
            console.log(1,listDate);

        }
    })
}
onMounted(() => {
    render()
})

</script>

<style scoped lang="less">
.fenye {
    margin-top: 15px;
    display: flex;
    justify-content: center;
}
</style>